import React, { Component } from 'react';
import { connect } from 'react-redux';
import { add, sub, addAsync } from '../../redux/Count';

class Count extends Component {

  add = () => {
    const { value } = this.select
    this.props.add({ value: parseInt(value) })
  }
  sub = () => {
    const { value } = this.select
    this.props.sub({ value: parseInt(value) })
  }
  addOdd = () => {
    const { value } = this.select
    console.log(this.props.count);
    if (this.props.count % 2 != 0) {
      this.props.add({ value: parseInt(value) })
    }
  }
  addAsync = () => {
    const { value } = this.select
    this.props.addAsync({ value: parseInt(value), time: 500})
  }
 
  render() { 
    return (
      <div>
        <h2>下面组件的人数为: { this.props.person.length }</h2>
        <h2>当前求和为: { this.props.count }</h2>
        <select ref = {dom => this.select = dom}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.add}>+</button>&nbsp;
        <button onClick={this.sub}>-</button>&nbsp;
        <button onClick={this.addOdd}>奇数时加</button>&nbsp;
        <button onClick={this.addAsync}>异步加</button>&nbsp;
      </div>
    );
  }
}
 
export default connect(
  state => ({
    count: state.count,
    person: state.person
  }),
  { add, sub, addAsync }
)(Count);